@import '../variables.scss';

.MatcSplitView {
    width: 100%;
    height: 100vh;
    display: flex;
    align-items: center;
    
    .MatcSplitViewChild{
        height: 100%;
        overflow: auto;
    }

    .MatcSplitViewChildBorder.MatcSplitViewLeft {
        border-right: 1px solid $page_border;
    }

    .MatcSplitViewChildBorder.MatcSplitViewRight {
        border-left: 1px solid $page_border;
    }

    .MatcSplitViewHandler {
        position: absolute;
        left: 8px;
        top: 50%;
        height: 32px;
        width: 4px;
        background: $page_border;
        border-radius: 50px;
        cursor: ew-resize;

        &:hover {
            background: $gray_3;
        }

        &.MatcSplitViewHandlerRight{
            left: auto;
            right:8px
        }
    }
    
    .MatcSplitViewBorder {
        width: 0px;
        height: 100%;
        position: relative;
    }

    .MatcCollapseViewMinVisible {
        display: none;
    }
}

.MatcCollapseView {

    .MatcCollapseViewHandler {
        position: absolute;
        left: 8px;
        top: 50%;
        height: 32px;
        width: 16px;
        cursor: pointer;


        .MatcCollapseViewHandlerTop {
            position: absolute;
            height: 17px;
            background: $page_border;
            border-radius: 50px;
            width: 4px;
            top:0px;
            transition: transform 0.2s;
        }

        .MatcCollapseViewHandlerBottom {
            position: absolute;
            height: 17px;
            background: $page_border;
            border-radius: 50px;
            width: 4px;
            top:12px;
            transition: transform 0.2s;
        }

        &:hover {
            .MatcCollapseViewHandlerTop {
                transform: rotate(20deg);
                background: $gray_3;
            }
            .MatcCollapseViewHandlerBottom {
                transform: rotate(-20deg);
                background: $gray_3;
            }
        }
       
    }

    &.MatcCollapseViewMin {

        .MatcCollapseViewHandler:hover {
          
            .MatcCollapseViewHandlerTop {
                transform: rotate(-20deg);
                background: $gray_3;
            }
            .MatcCollapseViewHandlerBottom {
                transform: rotate(20deg);
                background: $gray_3;
            }
        }

        .MatcCollapseViewMinVisible {
            display: block;
        }
        .MatcCollapseViewMinHidden {
            display: none;
        }
    }
}


    
.MatcSplitViewChildResizeContainer{
    container-type: inline-size;
    container-name: child;
}


@container (max-width: 256px) {
    .MatcSplitView200Hidden {
        display: none;
    }
}
